define([
	'../api',
	'../index',
    'text!./index.html',
    'css!./index.css',
], function(api,ohcard, html, css, explain) {
    return {
		inject: ['appPaddingBottom'],
		components: {
		},
        props: {
			room_id:{
				type: Number,
				default: 0,
			},
			room:{
				type:Object,
				default:{
					id:0,
					is_adult:0,
				},
			},
			step:{
				type: Number,
				default: 1,
			},
			selected:{
				type: Array,
				default: [],
			},
	        chooseIndex:{
				type:Number,
		        default:null,
	        }
        },
	    mounted:function(){
	    },
	    methods: {
			show: function(isShow){
				this.imageShow = isShow;
				if(this.appPaddingBottom!=undefined){
					if(isShow){
						this.appPaddingBottom = '300px';
					}else{
						this.appPaddingBottom = '20px';
					}
				}
			},
		    remove: function(index){
				this.$emit('remove', index);
		    },
		    prev: function(){
				const step = this.room.step - 1
				api.setStep(this.room.id,step)
				.then((res)=>{
					this.room.step = step;
				})
		    },
		    next: function(){
				this.$emit('next');
		    },
		    imageOn: function(index){
				return index == this.chooseIndex
		    },
		    choose: function(index){
				this.$emit('choose', index);
		    }
	    },
        data: function () {
			return {
				imageShow:false,
			};
        },
        template: html
    };
});